﻿
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="~/Content/layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
    <div style="margin:10px;">
        <div class="demoTable">
            <button class="layui-btn" id="addNewCode">新增</button>
            <div class="layui-inline">
                <input class="layui-input" name="id" id="searchText" autocomplete="off">
            </div>
            <button class="layui-btn" id="search" >搜索</button>
        </div>
        <table class="layui-table" id="codeTable" lay-filter="code"></table>
    </div>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>


    <script src="~/Content/layui/layui.js" charset="utf-8"></script>
    <script type="text/html" id="tagTpl">
        {{#  if(d.ClassTag ==1){ }}
        <a class="layui-btn layui-btn-sm layui-btn-normal">软件源码</a>
        {{#  } else if(d.ClassTag==2) { }}
        <a class="layui-btn layui-btn-sm">学习文件</a>
        {{#  } else { }}
        <a class="layui-btn layui-btn-sm layui-btn-warm">其他</a>
        {{#  } }}
    </script>
    <script type="text/html" id="showTpl">
        <input type="checkbox" name="IsShowed" value="{{d.Id}}" lay-skin="switch" lay-text="是|否" lay-filter="showTpl" {{ d.IsShowed ? 'checked' : '' }}>
    </script>
    <script type="text/html" id="valueTpl">
        <input type="checkbox" name="IsValued" value="{{d.Id}}" lay-skin="switch" lay-text="是|否" lay-filter="valueTpl" {{ d.IsValued ? 'checked' : '' }}>
    </script>
    <script>
        layui.use(['table', 'jquery','form','layer'], function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.jquery;

            var codeTable = table.render({
                elem: '#codeTable'
                , height: 'full-100'
                , url: '/home/GetCodes' //数据接口
                , page: true //开启分页
                , cols: [[ //表头
                    { field: 'Id', title: 'ID', width: 80, sort: true, fixed: 'left' }
                    , { field: 'Title', title: '标题', width: 200 }
                    , { field: 'ClassTag', title: '文件类型', width: 100, templet: '#tagTpl' }
                    , { field: 'KeyWords', title: '关键词', width: 150 }
                    , { field: 'CoverUrl', title: '封面', width: 100 }
                    , { field: 'HtmlContent', title: '内容', width: 200 }
                    , { field: 'WpUrl', title: '网盘地址', width: 150 }
                    , { field: 'ClickCount', title: '点击量', width: 120, sort: true }
                    , { field: 'CreateTime', title: '发布日期', width: 100 }
                    , { field: 'IsShowed', title: '是否显示', width: 90, templet: '#showTpl' }
                    , { field: 'IsValued', title: '是否加精', width: 90, templet: '#valueTpl' }
                    , { fixed: 'right', width: 178, align: 'center', toolbar: '#barDemo' }
                ]]
                , limit: 10
                , limits: [10, 20, 30]
            });
            //监听操作
            form.on('switch(showTpl)', function (obj) {
                var data = obj.data;
                $.get('/home/setshow?id='+this.value, function (res) {
                    if (res.code == 0)
                        layer.tips("操作成功");
                });
            });
            form.on('switch(valueTpl)', function (obj) {
                $.get('/home/setvalue?id=' + this.value, function (res) {
                    if (res.code == 0)
                        layer.tips("操作成功");
                });
            });
            //监听工具条
            table.on('tool(codes)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.msg('ID：' + data.mid + ' 的查看操作');
                    //查看操作
                } else if (obj.event === 'del') {
                    layer.confirm('真的删除吗?', function (index) {
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        //删除操作
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    layer.alert('编辑行：<br>' + JSON.stringify(data))
                }
            });

            $('#addNewCode').click(function () {
                window.location.href = "/home/add";
            });
            
        });
    </script>

</body>
</html>